<template>
  <div class="card-tab-box">
    <PubTable
      :isTabInner="true"
      :tableData="crudData"
      :uploadUrl="uploadUrl"
      :hasSearch="false"
      @selected-items="getSelection"
    />
  </div>
  <public-dialog
    v-model="showDetailDialog"
    title="查看详情"
    :before-close="closeDetailDialog"
    :showCancelButton="false"
    :showConfirmButton="false"
    :width="600"
  >
    <div
      class="publicdetails-title"
      style="margin-bottom: 18px; font-weight: bold"
    >
      <span
        style="
          white-space: normal;
          width: 84px;
          margin-right: 24px;
          display: inline-block;
        "
      >
        变量名称
      </span>
      {{ detailInfo.name }}
    </div>
    <div class="publicdetails-module">
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">功能码</div>
          <div class="public-text-value public-left">
            {{ detailInfo.fun }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">起始地址</div>
          <div class="public-text-value public-left">
            {{ detailInfo.startReg }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">寄存器数量</div>
          <div class="public-text-value public-left">
            {{ detailInfo.num }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">符号类型</div>
          <div class="public-text-value public-left">
            {{ detailInfo.symbol===0?"无符号":"有符号" }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">字节序</div>
          <div class="public-text-value public-left">
            {{ detailInfo.byteOrder===0?"小端":"大端"  }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">倍率</div>
          <div class="public-text-value public-left">
            {{ detailInfo.magnification }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">偏移量</div>
          <div class="public-text-value public-left">
            {{ detailInfo.skew }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">小数位数</div>
          <div class="public-text-value public-left">
            {{ detailInfo.decimal }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">单位</div>
          <div class="public-text-value public-left">
            {{ detailInfo.unit||'-' }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">数据类型</div>
          <div class="public-text-value public-left">
            {{ detailInfo.dataType=='float'?'浮点数':'整数' }}
          </div>
        </div>
      </div>
    </div>
  </public-dialog>
</template>

<script lang="jsx" setup>
import "@/components/PubTable/style/pubTablecss.scss";
import {
  tableData as mockData,
  caserData,
} from "@/components/PubTable/utils/mockData.js";
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
let { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();
const isDetail = ref(false);
const showDetailDialog = ref(false);
const detailInfo = ref({});
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});

const getTableData = (e) => {
  proxy
    ._http({
      url: "/api/product/pageFun",
      type: "post",
      isBody: true,
      isLoading: true,
      data: {
        id: props.id,
        page: crudData.value.pager.pageIndex,
        pageSize: crudData.value.pager.pageSize,
      },
    })
    .then((res) => {
      console.log(999, res);
      crudData.value.data = Array.isArray(res.records) ? res.records : [];
      crudData.value.pager.total = res.total || 0;
    })
    .catch((err) => {});
};

const closeDetailDialog = function () {
  showDetailDialog.value = false;
};

// 自定义验证函数
function validateNumber(rule, value, callback) {
  const reg = /^-?\d+(\.\d+)?$/;
  if (!reg.test(value)) {
    callback(new Error("只能浮点数"));
  } else {
    callback();
  }
}
//只能输入数字
function validateNumberOnly(rule, value, callback){
  const reg = /^\d+$/;
  if (!reg.test(value)) {
    callback(new Error("只能输入数字"));
  } else {
    callback();
  }
}
const editId = ref();
const editProductId = ref();

//全局数据配置
const crudData = ref({
  clums: [
    // {
    // 	type: "selection",
    // 	minWidth: 40,
    // 	label: "复选框",
    // 	fixed: "left",
    // },
    {
      type: "index",
      props: "index",
      label: "序号",
      width: 80,
      fixed: "left",
    },
    {
      props: "name",
      label: "变量名称",
      render: (scope) => {
        return (
          <>
            <el-link style="color:#00B5AD"
              onClick={async () => {
                detailInfo.value = scope.row;
                showDetailDialog.value = true;
              }}
            >
              {scope.row.name}
            </el-link>
          </>
        );
      },
    },
    {
      props: "fun",
      label: "功能码",
    },
    {
      props: "startReg",
      label: "起始地址",
    },
    {
      props: "num",
      label: "数量",
    },
    {
      props: "unit",
      label: "单位",
    },
    {
      props: "caozuo",
      label: "操作",
      width: 150,
      fixed: "right",
      render: (scope) => {
        return (
          <>
            <span
              class="p-table-btn p-table-btn-b"
              onClick={async () => {
                crudData.value.form.formName = "编辑";
                editId.value = scope.row.id;
                editProductId.value = scope.row.productId;
                crudData.value.form.formList = crudData.value.form.formList.map(
                  (item) => {
                    item.value = scope.row[item.key]===0?'0':scope.row[item.key];
                    return item;
                  }
                );

                crudData.value.form.formShow = true;
              }}
            >
              编辑
            </span>
            <span
              class="p-table-btn p-table-btn-r"
              onClick={() => {
                ElMessageBox.confirm(
                  "删除后系统无法恢复，确认删除吗?",
                  "信息提示",
                  {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    customClass: "public-message-box-default",
                  }
                ).then(() => {
                  //删除逻辑
                  proxy
                    ._http({
                      url: "/api/product/deleteFun",
                      type: "post",
                      isBody: true,
                      isLoading: true,
                      data: {
                        id: scope.row.id,
                      },
                    })
                    .then((res) => {
                      ElMessage.success("删除成功");
                      getTableData();
                    })
                    .catch((err) => {});
                });
              }}
            >
              删除
            </span>
          </>
        );
      },
    },
  ],
  handleBtns: [
    {
      text: "添加",
      onClick: () => {
        crudData.value.form.formName = "添加";
        crudData.value.form.formList = crudData.value.form.formList.map(
          (item) => {
            if (item.type == "multSelect") {
              item.value = [];
            } else {
              item.value = null;
            }
            return item;
          }
        );
        crudData.value.form.formShow = true;
      },
    },
  ],
  // sortRule 默认排序规则,排序字段prop在 clums中加上sortable
  sortRule: { prop: "value3", order: "descending" }, // prop: 'value3', order: 'descending'||'ascending'
  // data 获取数据getTableData
  data: mockData,
  // pager 分页配置
  pager: {
    total: 0,
    pageIndex: 1,
    pageSize: 10,
    pagerLang: [10, 20, 50, 100],
    sizeChange: (e) => {
      // 改变每页条数
      crudData.value.pager.pageSize = e;
      crudData.value.pager.pageIndex = 1;
      getTableData();
    },
    pageIndexChange: (e) => {
      // 改变页码
      crudData.value.pager.pageIndex = e;
      getTableData();
    },
  },
  // form 弹窗配置 可自定义或直接配置
  form: {
    formName: "添加",
    formShow: false,
    formList: [
      {
        key: "name",
        type: "input",
        label: "变量名称",
        placeholder: "请输入变量名称",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入变量名称",
            trigger: "blur",
          },
        ],
      },
      {
        key: "fun",
        type: "select",
        label: "功能码",
        placeholder: "请选择功能码",
        validate: [
          {
            required: true,
            message: "请选择功能码",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "3",
            value: 3,
          },
          {
            label: "4",
            value: 4,
          },
        ],
      },
      {
        key: "startReg",
        type: "input",
        label: "起始地址",
        placeholder: "请输入起始地址",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入起始地址",
            trigger: "blur",
          },
          //限制数字
          { validator: validateNumberOnly, trigger: "change" },
          //0-65535
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入起始地址"));
              }
              if (value < 0 || value > 65535) {
                return callback(new Error("请输入0-65535的数字"));
              }
              callback();
            },
          },
        ],
      },
      {
        key: "dataType",
        type: "select",
        label: "数据类型",
        placeholder: "请选择数据类型",
        validate: [
          {
            required: true,
            message: "请选择数据类型",
            trigger: "blur",
          },
        ],
        optionList: [
          {
            label: "浮点数",
            value: 'float',
          },
          {
            label: "整数",
            value: 'integer',
          },
        ],
      },
      {
        key: "num",
        type: "select",
        label: "寄存器数量",
        placeholder: "请选择数量",
        validate: [
          {
            required: true,
            message: "请选择数量",
            trigger: "blur",
          },
        ],
        optionList: [
          {
            label: "1",
            value: 1,
          },
          {
            label: "2",
            value: 2,
          },
        ],
      },
      {
        key: "symbol",
        type: "select",
        label: "符号类型",
        placeholder: "请选择符号类型",
        validate: [
          {
            required: true,
            message: "请选择符号类型",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "无符号",
            value: "0",
          },
          {
            label: "有符号",
            value: 1,
          },
        ],
      },
      {
        key: "byteOrder",
        type: "select",
        label: "字节序",
        placeholder: "请选择字节序",
        validate: [
          {
            required: true,
            message: "请选择字节序",
            trigger: "change",
          },
        ],
        // 大端/小端
        optionList: [
          {
            label: "小端",
            value: "0",
          },
          {
            label: "大端",
            value: 1,
          },
        ],
      },
      {
        key: "magnification",
        type: "input",
        label: "倍率",
        placeholder: "请输入倍率",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入倍率",
            trigger: "blur",
          },
          //限制浮点数
          { validator: validateNumber, trigger: "change" },
        ],
      },
      {
        key: "skew",
        type: "input",
        label: "偏移量",
        placeholder: "请输入偏移量",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入偏移量",
            trigger: "blur",
          },
          //限制浮点数
          { validator: validateNumber, trigger: "change" },
        ],
      },
      {
        key: "decimal",
        type: "select",
        label: "小数位数",
        placeholder: "请选择小数位数",
        validate: [
          {
            required: true,
            message: "请选择小数位数",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "0",
            value: "0",
          },
          {
            label: "1",
            value: 1,
          },
          {
            label: "2",
            value: 2,
          },
          {
            label: "3",
            value: 3,
          },
          {
            label: "4",
            value: 4,
          },
        ],
      },
      {
        key: "unit",
        type: "input",
        label: "单位",
        placeholder: "请输入单位",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
        ],
      },
    ],
    handelFormShow: (name, flag) => {
      crudData.value.form.formName = name;
      crudData.value.form.formShow = flag;
    },
    handelSubmit: (data) => {
      let queryData = {
        ...data,
      };
      queryData.magnification = Number(data.magnification);
      queryData.skew = Number(data.skew);
      queryData.startReg = Number(data.startReg);
      queryData.byteOrder = Number(data.byteOrder);
      queryData.symbol = Number(data.symbol);
      if (crudData.value.form.formName != "添加") {
        queryData.id = editId.value;
        queryData.productId = editProductId.value;
      } else {
        queryData.productId = props.id;
      }
      proxy
        ._http({
          url: "/api/product/addOrUpdateFun",
          type: "post",
          isBody: true,
          isLoading: true,
          data: queryData,
        })
        .then((res) => {
          ElMessage.success(
            crudData.value.form.formName == "添加" ? "添加成功" : "编辑成功"
          );
          getTableData();
          //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
          crudData.value.form.formShow = false;
        })
        .catch((err) => {
          //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
          crudData.value.form.formShow = false;
        });
    },
  },
  //查询参数回调
  searchCb: (e) => {
    console.log("searchCb", e);
    getTableData(e);
  },
  //重置回调
  reset: (e) => {
    console.log("reset", e);
    getTableData();
  },
});

onMounted(() => {
  getTableData();
});

const uploadUrl = ref("/api/alarmPush/import");
var selectTion = reactive([]);
const getSelection = (val) => {
  selectTion = val;
  console.log("选中", selectTion);
};
</script>

<style lang="scss" scoped>
</style>
